<!-- 实习见习 -->
<template>
	<div class="looking-for-talent-contain">
		<div class="header-contain">
			<Header></Header>
		</div>
		<div class="header-img-contain">
			<div class="ad-tool flex-column-center">
                <div>
                	 <span class="active fs20 bold white pointer bold ml25 mr25 ">
                        找工作
                    </span>
                    <router-link to="/enterprise" class="fs20 white pointer bold">
                        找人才
                    </router-link>
                    <div class="search-contain flex-row-start mt10">
                        <div class="job-search-bg search-input-contain">
                            <input placeholder="请输入您要寻找的人才信息！" type="text" name="search">
                        </div>
                        <div class="search-button-contain mt10">
                            <button class="pointer" title="搜索"  @click="goToSearch('/job')">
                                <i class="inline-block search-button-icons"></i>
                            </button>
                        </div>
                    </div>
                   <!-- <p class="white fs14 pl25 pt15">
                    	热门关键字：
                    	<span v-for="item in hotKeys" :key="item" class="mr20">
                    		{{ item }}
                    	</span>
                    </p>-->
                </div>
            </div>
		</div>
		<div class="wrap pt20">
			<ul class="container pt30 pb30 pl20 pr20 radius">
				<li class="flex-row-start">
					<span class="filter-type c666 inline-block">
						选择城市
					</span>
					<div class="filter-content mb10" style="height: 26px; line-height: 26px;">
						<el-checkbox-group v-model="cityArr" @change="getData">
						    <el-checkbox label="厦门市"></el-checkbox>
						    <el-checkbox label="泉州市"></el-checkbox>
						  </el-checkbox-group>
					</div>
				</li>
				<li class="flex-row-start">
					<span class="filter-type c666 inline-block">
						区域
					</span>
					<div class="filter-content mb10">
						<span class="filter-item inline-block mr35 mb10 pointer pl10 pr10">
							思明
						</span>
						<span class="filter-item inline-block mr35 mb10 pointer pl10 pr10">
							湖里
						</span>
					</div>
				</li>
				<li class="flex-row-start">
					<span class="filter-type c666 inline-block">
						工作地点
					</span>
					<div class="filter-content">
						<span class="filter-item inline-block mr35 mb10 pointer pl10 pr10"
							:class="{'active': workExperienceActive === 'all'}"
							@click="workExperienceActive = 'all'"
						>
							不限
						</span>
						<span class="filter-item inline-block mr35 mb10 pointer pl10 pr10"
							 v-for="(item, key) in workExperience"
							 :key="key"
							 :class="{'active': workExperienceActive === item.id}"
							 @click="workExperienceActive = item.id;getData()"
						>
							{{ item.text }}
						</span>
					</div>
				</li>
				<li class="flex-row-start">
					<span class="filter-type c666 inline-block">
						职位薪资
					</span>
					<div class="filter-content">
						<span class="filter-item inline-block mr35 mb10 pointer pl10 pr10"
							:class="{'active': resumeLabelActive === 'all'}"
							@click="resumeLabelActive = 'all'"
						>
							不限
						</span>
						<span class="filter-item inline-block mr35 mb10 pointer pl10 pr10"
							 v-for="(item, key) in resumeLabel"
							 :key="key"
							 :class="{'active': resumeLabelActive === item.id}"
							 @click="resumeLabelActive = item.id;getData()"
						>
							{{ item.text }} /月
						</span>
					</div>
				</li>
				<li class="flex-row-start">
					<span class="filter-type c666 inline-block">
						职位亮点
					</span>
					<div class="filter-content">
						<span class="filter-item inline-block mr35 mb10 pointer pl10 pr10"
							:class="{'active': jobBrightActive === 'all'}"
							@click="jobBrightActive = 'all'"
						>
							不限
						</span>
						<span class="filter-item inline-block mr35 mb10 pointer pl10 pr10"
							 v-for="(item, key) in jobBrightArr"
							 :key="key"
							 :class="{'active': jobBrightActive === item.id}"
							 @click="jobBrightActive = item.id; getData()"
						>
							{{ item.text }}
						</span>
					</div>
				</li>
				<li class="flex-row-start">
					<span class="filter-type c666 inline-block">
						更多筛选
					</span>
					<div class="filter-content">
						<el-select v-model="belongsIndustryActive" @change="getData" placeholder="请选择" class="mr15">
						    <el-option
						      v-for="item in belongsIndustryArr"
						      :key="item.id"
						      :label="item.text"
						      :value="item.id">
						    </el-option>
						</el-select>
						<el-select v-model="companyScaleActive" @change="getData" placeholder="请选择" class="mr15">
						    <el-option
						      v-for="item in companyScaleArr"
						      :key="item.id"
						      :label="item.text"
						      :value="item.id">
						    </el-option>
						</el-select>
						<el-select v-model="companyNatureActive" @change="getData" placeholder="请选择" class="mr15">
						    <el-option
						      v-for="item in companyNatureArr"
						      :key="item.id"
						      :label="item.text"
						      :value="item.id"
						      >
						    </el-option>
						</el-select>
						<el-select v-model="educationActive" @change="getData" placeholder="请选择" class="mr15">
						    <el-option
						      v-for="item in educationArr"
						      :key="item.id"
						      :label="item.text"
						      :value="item.id"
						      >
						    </el-option>
						</el-select>
						<el-select v-model="experienceActive" @change="getData" placeholder="请选择" class="mr15">
						    <el-option
						      v-for="item in experienceArr"
						      :key="item.id"
						      :label="item.text"
						      :value="item.id"
						      >
						    </el-option>
						</el-select>
					</div>
				</li>
			</ul>
			<div class="mt20 mb20">
				<div class="container pt20 pb20 pl20 pr20 radius">
					<span class="mr15">
						排序方式
					</span>
					<span class="border mr15 pt5 pb5 pl10 pr10 radius mr15">
						综合排序
					</span>
					<span class="border mr15 pt5 pb5 pl10 pr10 radius mr15">
						更新时间
					</span>
				</div>
			</div>
			<div class="container transparent-bg flex-row-space-between">
				<ul class="left-contain">
						<li class="mb20 white-bg"
							v-for="(item, key) in list"
							:key="key"
						>
							<div class="pt20 pb20 pl20 pr20 radius">
							<div class="top-info flex-row-start">
								<div class="checkbox-contain">
									<el-checkbox v-model="checked"></el-checkbox>
								</div>
								<router-link :to="'/talent-detail/' + item.id" target="_blank">
									<span class="name fs18 pl20 text-l inline-block">
										{{ item.jobTitle }}
									</span>
								</router-link>
							</div>
							<div class="detail-info pl35 pt25 flex-row-start">
								<div class="personal-situation">
									<p class="expect mb15 flex-row-start">
										<span class="company-name fs16 inline-block mr10 overflow-ellipsis">
											{{ item.companyName }}
										</span>
										<span class="money">
											{{ item.salaryStart }}K - {{ item.salaryEnd }}K / 月
										</span>
									</p>
									<p class="more-overflow-ellipsis text">
										学历：{{ item.education | educationFilter }} |
										经验：{{ item.experience }} |
										职位性质：{{ item.jobNature | jobNatureFilter }} |
										人数： {{ item.recruitmentNumber }} |
										地点： {{ item.workArea }}
									</p>
									<div class="mt10">
										<span v-for="(j, key) in item.jobBright" :key="key" class="border pl10 pr10 radius mr10">
											{{ j }}
										</span>
									</div>
								</div>
								<div class="operating text-r">
									<div  class="workArea download-btns pointer"
										v-show="item.isApplied === 0"
										@click="setApplyJob(item)"
									>
										<i class="download-btns-icon"></i>
										职位申请
									</div>
									<div v-show="item.isApplied === 1" class="download-btns downloaded pointer">
										<i class="download-btns-icon"></i>
										已投递
									</div>
									<p class="mt15 mr40">
										<span v-show="item.isCollection === 1" class="collect collected fs14 pointer inline-block">
											<i class="el-icon-star-on fs16"></i>
											已收藏
										</span>
										<span class="collect fs14 pointer inline-block"
											v-show="item.isCollection === 2"
											@click="collectJob(item)"

										>
											<i class="el-icon-star-on fs16"></i>
											收藏
										</span>
									</p>
								</div>
							</div>
							</div>
						</li>
					<li>
						<div class="pl20 pb30">
							<el-checkbox v-model="checked"></el-checkbox>
							<el-button size="small" class="ml20">
								申请职位
							</el-button>
							<el-button size="small" class="ml20">
								收藏简历
							</el-button>
						</div>
						<div class="text-c pb160">
							<el-pagination
							  background
							  layout="prev, pager, next"
							  :total="30">
							</el-pagination>
						</div>
					</li>
				</ul>
				<div class="right-contain white-bg">
					<h2 class="fs18 pt20 pb20 pl10 pr10">
						最新职位
					</h2>
					<ul>
						<li v-for="item in 5" class="pl10 pr10 pb10 pt10"
							:class="{'border-b': item < 4}"
						>
							<router-link to="index.vue" class="flex-row-space-between">
								<div class="job-info">
									<p class="overflow-ellipsis mb10">
										Java开发工程师
									</p>
									<p class="overflow-ellipsis mb10">
										国际航空有限公司
									</p>
									<p class="overflow-ellipsis mb10">
										广东 / 深圳市
									</p>
								</div>
								<span class="hide">
									面议
								</span>
								<span class="new-job-money money overflow-ellipsis inline-block">
									1.8-3万/月
								</span>
							</router-link>
						</li>
					</ul>
				</div>
			</div>
		</div>
    	<Footer></Footer>
	</div>
</template>
<script>
import Header from '@/views/components/header/header'
import Footer from '@/views/components/header/footer'
import { getInternship, setCollect, setMoreCollect, applyJob } from '@/api/enterprise/index'

export default {
	name: 'Internship',
	data() {
		return {
			cityArr: [],
			hotKeys: ['销售', 'java', '人事会计', 'UI平面设计', '行政web', '前端', '房地产'],
			workExperience: [
				{
					id: 1,
					text: '海沧区'
				},
				{
					id: 2,
					text: '同安区'
				}
			],
			workExperienceActive: 'all',
			resumeLabel: [
				{id: 1, text: '1.5K-2K'},
				{id: 2, text: '2K-2.5K'}
			],
			resumeLabelActive: 'all',
			jobBrightArr: [
				{id: 1, text: '环境好'},
				{id: 2, text: '丰富下午茶'}
			],
			jobBrightActive: 'all',
			belongsIndustryArr: [
				{id: 0, text: '所属行业'},
				{id: 1, text: '服务行业'},
				{id: 2, text: '教育行业'}
			],
			belongsIndustryActive: 0,
			companyScaleArr: [
				{id: 0, text: '企业规模'},
				{id: 1, text: '100-500人'},
				{id: 2, text: '1000人以上'}
			],
			companyScaleActive: 0,
			companyNatureArr: [
				{id: 0, text: '企业性质'},
				{id: 1, text: '民营企业'},
				{id: 2, text: '国有企业'}
			],
			companyNatureActive: 0,
			educationArr: [
				{id: 0, text: '学历要求'},
				{id: 1, text: '小学'},
				{id: 2, text: '初中'},
				{id: 3, text: '高中'},
				{id: 4, text: '本科'},
				{id: 5, text: '硕士'},
				{id: 6, text: '博士'}
			],
			educationActive: 0,
			experienceArr: [
				{id: 0, text: '工作经验'},
				{id: 1, text: '1年工作经验'},
				{id: 2, text: '2-3年工作经验'},
			],
			experienceActive: 0,
			list: [],
			testRes666: {
				"code": 0,
				"count": 0,
				"data": [
					{
						"ageEnd": 0,
						"ageStart": 0,
						"companyId": 0,
						"companyName": "深圳市腾讯计算机系统有限公司",
						"corporateWelfare": "",
						"createTime": "2020-09-29",
						"departmentId": 0,
						"education": 6,
						"experience": '5年以上',
						"id": 1,
						"isApplied": 0,
						"isCollection": 2,
						"isNegotiable": 0,
						"jobBright": ["有加班费", "丰富下午茶"],
						"jobCategory": "",
						"jobDesc": "",
						"jobNature": 0,
						"jobTitle": "WEB架构师",
						"recruitChannel": "",
						"recruitmentNumber": 5,
						"salaryEnd": 200,
						"salaryStart": 100,
						"sex": 0,
						"workArea": "深圳"
					},
					{
						"ageEnd": 0,
						"ageStart": 0,
						"companyId": 0,
						"companyName": "深圳市腾讯计算机系统有限公司",
						"corporateWelfare": "",
						"createTime": "2020-09-09",
						"departmentId": 0,
						"education": 5,
						"experience": '1年以上',
						"id": 2,
						"isApplied": 1,
						"isCollection": 2,
						"isNegotiable": 1,
						"jobBright": ["有加班费", "丰富下午茶", "上班专车"],
						"jobCategory": "",
						"jobDesc": "",
						"jobNature": 1,
						"jobTitle": "测试工程师",
						"recruitChannel": "",
						"recruitmentNumber": 20,
						"salaryEnd": 10,
						"salaryStart": 50,
						"sex": 0,
						"workArea": "北京"
					},
					{
						"ageEnd": 0,
						"ageStart": 0,
						"companyId": 0,
						"companyName": "深圳市腾讯计算机系统有限公司",
						"corporateWelfare": "",
						"createTime": "2020-09-09",
						"departmentId": 0,
						"education": 5,
						"experience": '无要求',
						"id": 3,
						"isApplied": 1,
						"isCollection": 1,
						"isNegotiable": 1,
						"jobBright": ["领导nice", "氛围友好", "下午茶"],
						"jobCategory": "",
						"jobDesc": "",
						"jobNature": 0,
						"jobTitle": "用户体验工程师",
						"recruitChannel": "",
						"recruitmentNumber": 15,
						"salaryEnd": 10,
						"salaryStart": 2,
						"sex": 1,
						"workArea": "上海"
					}
				],
				"hasNext": true,
				"hasPrevious": true,
				"total": 0
			}
		}
	},
	components: {
		Header,
		Footer
	},
	filters: {
		educationFilter(val) {
			let educatObj = {
				0: '无要求',
				1: '小学',
				2: '初中',
				3: '高中',
				4: '本科',
				5: '硕士',
				6: '博士'
			}
			return educatObj[val]
		},
		jobNatureFilter(val) {
			let obj = {
				0: '全职',
				1: '兼职'
			}
			return obj[val]
		}
	},
	created() {
		this.list = this.testRes666.data
	},
	methods: {
		// 职位申请
		setApplyJob(item) {
			let params = {
				"positionId": item.id,
				"resumeId": 0,
				"resumeSource": "",
				"statusTag": ""
			}
			// applyJob(data).then( res => {
				this.$message.success('职位申请成功');
				item.isApplied = 1
			// })
		},
		// 收藏职位
		collectJob(item) {
			let params = {
				"accountId": "",
				"positionId": item.id
			}
			// setCollect(params).then( res => {
				 this.$message.success('收藏成功');
				 // 1=>已收藏， 2=>未收藏
				 item.isCollection = 1
			// })
		},
		getData() {
			// alert('获取招聘数据')
			alert(this.companyNatureActive)
			return false
			let params = {
				"belongsIndustry": this.belongsIndustryActive,
				"companyNature": this.companyNatureActive,
				"companyScale": this.companyScaleActive,
				"education": this.educationActive,
				"experience": this.experienceActive,
				"jobBright": this.jobBrightActive,
				"salaryEnd": this.resumeLabelActive,
				"salaryStart": this.resumeLabelActive,
				"workArea": this.workExperienceActive,
				"limit": 0,
				"page": 0
			}
			getInternship(params).then( res => {
				this.list = res.data
			})
		}
	}
}
</script>
<style lang="scss">
@import url('../../assets/styles/enterprise/common.css');
.el-select-dropdown__item.selected {
	color: #BE485E !important;
}
.pb160 {
	padding-bottom: 160px;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
	background-color: #3EACC4;
}

.looking-for-talent-contain {
	.header-contain {
		position: absolute;
		width: 100%;
		top: 0;
		.top, .nav {
			background: rgba(0, 0, 0, 0.49) !important;
		}
	}
	.header-img-contain {
		width: 100%;
		min-width: 1200px;
		height: 306px;
		background: url('../../assets/image/enterprise/jxsx-bg.png') no-repeat;
		background-size: 100% 100%;
		.ad-tool {
            width: 100%;
            min-width: 1200px;
            position: absolute;
            top: 140px;
            z-index: 100;
            .active {
                font-size: 26px;
                color: #fff;
            }
            .search-contain {
                .search-input-contain {
                    width: 539px;
                    height: 62px;
                    padding-top: 12px;
                    padding-left: 38px;
                    input {
                        width: 495px;
                        height: 48px;
                        font-size: 18px;
                        border-width: 0px !important;
                        background: transparent;
                        outline: none;
                        color: #fff;
                    }
                    input::-webkit-input-placeholder { color:#fff; }
                }
                .job-search-bg {
                    background: url('../../assets/image/enterprise/search-bg.png') no-repeat;
                    background-size: 100% 100%;
                }
                .search-button-contain {
                    width: 88px;
                    height: 52px;
                    background: url('../../assets/image/enterprise/search-button-bg.png') no-repeat;
                    button {
                        background: transparent;
                        width: 88px;
                        height: 52px;
                        border-width: 0px !important;
                        outline: none;
                        .search-button-icons {
                            width: 27px;
                            height: 28px;
                            background: url('../../assets/image/enterprise/search-button-icons.png') no-repeat;
                        }
                    }
                }
            }
        }
	}
	.wrap {
		background: #F7F7F7;
		.transparent-bg {
			background: transparent !important;
		}
		.container {
			width: 1200px;
			margin: 0 auto;
			background: #fff;
			.c666 {
				color: #666;
			}
			.money {
				color: #BE485E;
			}
			.left-contain {
				width: 950px;
			}
			.right-contain {
				width: 230px;
				height: 560px;
				.job-info {
					width: 120px;
				}
				.new-job-money {
					width: 75px;
				}
			}
			.filter-type {
				width: 75px;
				padding-top: 5px;
			}
			.filter-content {
				width: 1080px;
				.filter-item {
					vertical-align: middle;
					height: 26px;
					line-height: 26px;
				}
				.active {
					background: #5EAAC2;
					border-radius: 4px;
					color: #fff;
				}
				.el-input--medium .el-input__inner {
					width: 110px;
				    height: 32px;
				    line-height: 32px;
				    border: 1px solid transparent;
				}
				.el-select .el-input .el-select__caret {
					color: #BE485E;
				}
			}
			.top-info {
				.checkbox-contain {
					height: 20px;
					line-height: 20px;
				}
				.name {
					color: #5EAAC2;
					vertical-align: middle;
				}
			}
			.detail-info {
				.personal-situation {
					width: 635px;
					.expect {
						color: #343434;
						.company-name {
							width: 455px;
						}

					}
					.text {
						color: #9A9A9A;
						line-height: 1.5;
					}
				}
				.operating {
					width: 239px;
					.download-btns {
						display: inline-block;
						width: 130px;
						height: 40px;
						background: #3EACC4;
						border-radius: 4px;
						color: #fff;
						line-height: 40px;
						text-align: center;
						.download-btns-icon {
							display: inline-block;
							width: 17px;
							height: 17px;
							margin-right: 5px;
							background: url('../../assets/image/icon-send-2.png') no-repeat;
							background-size: 100% 100%;
						}
					}
					.download-btns.downloaded {
						background: #fff;
						color: #3EACC4;
						border: 1px solid #3EACC4;
						.download-btns-icon {
							background: url('../../assets/image/icon-send.png') no-repeat;
							background-size: 100% 100%;
						}
					}
					.collect {
						color: #CE3A5C;
					}
					.collect.collected {
						color: #9A9A9A;
					}
				}
			}

		}
	}
}
</style>
